<template>
    <div>
        <Form
            ref="entityForm"
            class="page-sys-user-drawer-form"
            :model="entity"
            :rules="entityRules"
            :disabled="drawerType === 'read'"
            label-position="top"
            label-colon
            hide-required-mark
        >
            <Row :gutter="32">
                <Col span="12">
                    <FormItem prop="name" label="字段名称">
                        <Input
                            v-model="entity.name"
                            placeholder="请输入属性字段名称,必填"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="note" label="字段描述">
                        <Input
                            v-model="entity.note"
                            placeholder="请输入属性字段描述"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem
                        prop="attributeType"
                        label="字段类型"
                    >
                        <Select v-model="entity.attributeType">
                            <Option value="Input">Input</Option>
                            <Option value="Select">Select</Option>
                            <Option value="TextArea">TextArea</Option>
                            <Option value="Checkbox">Checkbox</Option>
                            <Option value="Radio">Radio</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12" v-show="'Select,CheckBox'.indexOf(entity.attributeType)>-1 ">
                    <FormItem
                        prop="dataSource"
                        label="数据源"
                    >
                        <Input
                            v-model="entity.dataSource"
                            placeholder="请输入数据源"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="isNull" label="是否为空">
                        <Select v-model="entity.isNull">
                            <Option :value="1">允许</Option>
                            <Option :value="0">不允许</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="defaultValue" label="默认值">
                        <Input
                            v-model="entity.defaultValue"
                            placeholder="请输入默认值"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="isHidden" label="是否隐藏">
                        <Select v-model="entity.isHidden">
                            <Option :value="1">隐藏</Option>
                            <Option :value="0">显示</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Divider />
        </Form>
        <div class="page-sys-user-drawer-footer" v-if="drawerType != 'read'">
            <Button
                type="primary"
                @click="handleSubmitEdit"
                :loading="submitting"
                >提交</Button
            >
        </div>
    </div>
</template>
<script>
    import { mapState } from "vuex";
    import { SaveData, GetData } from "@api/attribute";

    export default {
        name: "table-form",
        props: {
            entityId: String,
            drawerType: String
        },
        data() {
            return {
                submitting: false,
                entity: {
                    id: null,
                    code:'',
                    name: "",
                    note: "",
                    attributeType: "",
                    dataSource: "",
                    isNull: "",
                    defaultValue: "",
                    isHidden: ""
                },
                entityRules: {
                    name: [
                        {
                            required: true,
                            message: "请输入属性字段名称",
                            trigger: "blur"
                        }
                    ],
                    attributeType: [
                        {
                            required: true,
                            message: "请选择字段类型",
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        computed: {
            ...mapState("admin/layout", ["isMobile"]),
            labelWidth() {
                return this.isMobile ? undefined : 100;
            },
            labelPosition() {
                return this.isMobile ? "top" : "right";
            }
        },
        methods: {
            initEntity() {
                GetData(this.entityId).then(res => {
                    if (res.errcode != 0) {
                        this.$Message.error(res.msg);
                        return;
                    }
                    this.entity = res.data;
                });
            },
            handleSubmitEdit() {
                this.$refs.entityForm.validate(valid => {
                    if (valid) {
                        if (this.submitting) return;
                        this.submitting = true;

                        SaveData(this.entity).then(res => {
                            this.submitting = false;
                            if (res.errcode != 0) {
                                this.$Message.error(res.msg);
                                return;
                            }
                            this.$emit("saveFinished");
                        }).catch(error=>{
                            this.submitting = false;
                        });
                    }
                });
            }
        },
        mounted() {
            
            if (this.entityId) 
                this.initEntity();
            else
            {
                if(this.$route.path.indexOf('userattr')>-1){
                    this.entity.code='User';
                }
                else{
                    this.entity.code='Org';
                }
            }
        }
    };
</script>
